<template>
  <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>管理员管理</span>
			<el-button style="float: right; padding: 3px 0" type="text" @click="showUserCreateForm=true">新增管理员</el-button>
		</div>
		<el-table
			:data="userListData"
			style="width: 100%">
			<el-table-column label="管理员id">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="管理员名">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.username }}</span>
				</template>
			</el-table-column>
			<el-table-column label="创建日期">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- <el-button
						size="mini"
						@click="getuserInfo(scope.$index, scope.row)">修改</el-button>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
					<el-button
						size="mini"
						type="danger"
						v-if="scope.row.isAdmin == 0 && scope.row.accountNonLocked"
						@click="lockAdmin(scope.$index, scope.row)">锁定</el-button>
						<el-button
						size="mini"
						v-if="scope.row.isAdmin == 0 && !scope.row.accountNonLocked"
						@click="lockAdmin(scope.$index, scope.row)">解锁</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 15px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="userNumber">
		</el-pagination>
		<!-- 管理员修改抽屉 -->
		<!-- <el-drawer
			size="50vw"
			:before-close="beforeUpdateFormClose"
			:visible.sync="showUserInfoForm"
			direction="rtl">
			<user-update-form :userUpdateData="userInfo"/>
		</el-drawer> -->
		<!-- 管理员创建抽屉 -->
		<el-drawer
			size="50vh"
			:before-close="beforeCreateFormClose"
			:visible.sync="showUserCreateForm"
			direction="btt">
			<user-create-form/>
		</el-drawer>
	</el-card>
</template>

<script>
import { userList,userSearch,lockAdmin } from '@/api/user'
import UserCreateForm from './Drawer/UserCreateForm.vue'
// import UserUpdateForm from './Drawer/UserUpdateForm.vue'
	export default {
		name: 'User',
		data() {
			return {
				//总记录数
				userNumber: 0,
				// 获取管理员列表分页参数
				userListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 管理员列表
				userListData: [],
				// 显示管理员创建抽屉
				showUserCreateForm: false,
				// 显示管理员修改抽屉
				showUserInfoForm: false,
				// 管理员信息
				userInfo: {},
				// 锁定参数
				lockAdminParam: {
					id: '',
					lock: false
				}
			}
		},
		props: {
			// 获取父组件参数
		},
		components: {
			UserCreateForm,
			// UserUpdateForm
		},
		methods:{
			// 锁定管理员
			lockAdmin(index, row) {
				this.lockAdminParam.id = row.id
				this.lockAdminParam.lock = !row.accountNonLocked
				lockAdmin(this.lockAdminParam)
				this.getUserList()
			},
			// 改变页码
			handleCurrentChange(val) {
				this.userListParam.startIndex = val - 1
				this.getUserList()
			},
			// 获取管理员列表
			getUserList(){
				userList(this.userListParam).then(res => {
					console.log(res.data);
					this.userListData = res.data.records
					this.userNumber = res.data.total
				})
			},
			// 修改管理员抽屉关闭前
			beforeUpdateFormClose(){
				this.getUserList()
				this.showUserInfoForm = false
			},
			// 创建管理员抽屉关闭前
			beforeCreateFormClose(){
				this.getUserList()
				this.showUserCreateForm = false
			},
			// 获取管理员信息
			getuserInfo(index, row){
				userSearch({userId: row.userId}).then(res => {
					this.userInfo = res.data.user	
					console.log(this.userInfo);
					this.showUserInfoForm = true
				})
			}
		},
		computed:{
				//计算属性
				
		},
		watch:{
				//监听属性
		},
		created() {
			this.getUserList()
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>